<script setup lang="ts">
import type { MovieItem, Actor } from '@/types/movieItem';
import { ref } from 'vue'

// 定义 props 接收
defineProps<{
    list: MovieItem[]
}>()



// 获取主演字符串
function getactorString(ActorList: Actor[]) {

    let actorString = ref('')
    ActorList.forEach(item => {
        actorString.value += item.name + ','
    })

    actorString.value = actorString.value.slice(0, -1)

    return actorString.value
}


/** 携带电影的item参数跳转至详情页面
 * @param mid 电影id */
function goDetail(mid: String) {

    uni.navigateTo({
        url: '/pages/MovieDetails/MovieDetails?id=' + mid
    });
}


</script>

<template>
    <view class="PdListContainer">
        <view class="MlSon" v-for="item in list" :key="item.id">
            <view class="MlSonvBox">
                <view class="SonOfImg">
                    <image class="Img" :src="item.imgUrl"></image>
                </view>


                <view class="PdListDesc">
                    <view class="PdListDescLeft">
                        <text class="movieName">{{ item.name }}</text>
                        <text class="star">熊猫评分{{ item.star.toFixed(1) }}</text>
                        <text class="protagonist">主演: {{ (item.actors[0].name + ',') + item.actors[1].name + ',' +
                            item.actors[2].name }}
                        </text>
                        <text class="cinema">今天有81家影院上映</text>
                    </view>
                    <view class=PdListDescRight> <button class="mini-btn" @tap="goDetail(item.id)" type="warn"
                            size="mini">购票</button></view>
                </view>


            </view>
        </view>
    </view>

</template>

<style lang="scss">
$max: 100%;

.PdListContainer {
    width: 92%;
    margin-left: 4%;
    max-width: 690rpx;
    height: auto;

    .MlSon {
        border-radius: 12rpx;

        .MlSonvBox {
            padding: 24rpx 32rpx;
            height: 168rpx;
            display: flex;
            justify-content: space-around;
            background: #fff;
            box-shadow: 1px 1px 3px #888888;

            margin-top: 10px;

            .SonOfImg {
                width: 164rpx;
                height: $max;
                border-radius: 12rpx;
                overflow: hidden;

                .Img {
                    width: $max;
                    height: $max;
                }
            }

            .PdListDesc {
                width: 428rpx;
                height: $max;
                display: flex;

                .PdListDescLeft {
                    width: 70%;
                }

                .PdListDescRight {
                    width: 30%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                }

                text {
                    display: block;
                }

                .star {
                    font-size: 12px;
                    color: #666;
                }

                .protagonist {
                    font-size: 14px;
                    color: #333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .cinema {
                    font-size: 16px;
                    color: #999;
                }

            }



            // .SNTop {
            //     //这部分是标题 我将其设置为超出两行隐藏掉您可根据需求设置为一行
            //     width: $max;
            //     height: 88rpx;
            //     text-overflow: -o-ellipsis-lastline;
            //     overflow: hidden;
            //     text-overflow: ellipsis;
            //     display: -webkit-box;
            //     -webkit-line-clamp: 2;
            //     line-clamp: 2;
            //     -webkit-box-orient: vertical;
            //     line-height: 44rpx;
            //     color: #06121E;
            //     font-size: 28rpx;
            // }

            // .SNBom {
            //     width: $max;
            //     height: 34rpx;
            //     line-height: 34rpx;
            //     font-size: 24rpx;
            //     justify-content: space-between;
            //     margin-top: 18rpx;


            // }
        }
    }
}
</style>
